<template>
  <div ref="stakeMonitorpie" :style="{ height, width }"></div>
</template>
<script lang="ts">
import { defineComponent, PropType, ref, Ref, reactive, watchEffect, watch, onMounted } from 'vue';
import { useECharts } from '/@/hooks/web/useECharts';
import { cloneDeep } from 'lodash-es';
import { log } from 'console';
import { number } from 'vue-types';
export default defineComponent({
  name: 'stakeMonitorpie',
  props: {
    chartData: {
      type: Number,
      default: 60,
    },
    option: {
      type: Object,
      default: () => ({}),
    },
    width: {
      type: String as PropType<string>,
      default: '100%',
    },
    height: {
      type: String as PropType<string>,
      default: '280px',
    },
  },
  setup(props) {
    const stakeMonitorpie = ref<HTMLDivElement | null>(null);
    const { setOptions, echarts, resize } = useECharts(stakeMonitorpie as Ref<HTMLDivElement>);
    // let legend = props.chartData.map((item) => {
    //   return item.name;
    // });
    // let seriesData = props.chartData;
    const option = reactive({

      title: {
        text: props.chartData+'% \n 实时SOC',
        x: 'center',
        y: 'center',
        textStyle: {
          fontWeight: 'normal',
          color: '#0580f2',
          fontSize: '14'
        }
      },
      series: [{
        name: 'Line 1',
        type: 'pie',
        left: '1%',
        right: '1%',
        top: '1%',
        bottom: '1%',
        clockWise: true,
        radius: ['70%', '90%'],
        itemStyle: {
          normal: {
            label: {
              show: false
            },
            labelLine: {
              show: false
            }
          }
        },
        hoverAnimation: false,
        data: [{
          value: props.chartData||0,
          name: '01',
          itemStyle: {
            normal: {
              color: '#367bec',
            }
          }
        }, {
          name: '02',
          value: 40,
          tooltip: {
            show: false
          },
          itemStyle: {
            normal: {
              color: '#e9eef4'
            },
            emphasis: {
              color: '#e9eef4'
            }
          },
          hoverAnimation: false
        }]
      }]
    })

    watchEffect(() => {
      props.chartData && initCharts();
    })
    /**
     * 监听拖拽大小变化
     */

    function initCharts() {
      if (props.option) {
        Object.assign(option, cloneDeep(props.option));
      }
      // let seriesData = props.chartData.map((item) => {
      //   return item.value;
      // });

      // option.series[0].data = seriesData;

      setOptions(option);
    }
    onMounted(() => {
      window.addEventListener('resize', function () {
        // console.log('resize');
        resize();
      });
    })

    return { stakeMonitorpie };
  },
});
</script>
